import React, {PureComponent} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  Keyboard,
  KeyboardAvoidingView,
  ScrollView,
  Modal,
} from 'react-native';
import I18n from 'react-native-i18n';
import {connect} from 'react-redux';
import {LinearButton} from '../../components/Button';
import BaseComponent from '../base/BaseComponent';
import {NormalHeader} from '../../components/NavigationHeader';
import {showToast} from '../../components/Toast';
import {userLogout} from '../../redux/action';
import Clipboard from '@react-native-community/clipboard';
import {LinerBoardTextInput} from '../../components/TextInput';
import {importNft} from '../../api/auction';

//#FFCB26
class ImportNFT extends BaseComponent {
  constructor(props) {
    super(props);

    this.state = {
      contract: '',
      tokenId: '',
    };
  }

  tapImportNft = async () => {
    this._showLoading();

    importNft({
      userToken: this.props.userInfo.token,
      contract: this.state.contract,
      tokenId: this.state.tokenId,
    })
      .then((res) => {
        this._hideLoading(() => {
          this.props.navigation.state.params.refresh();
          this.props.navigation.goBack();
        });
      })
      .catch((err) => {
        this._hideLoading(() => {
          this._showAlert({content: err.msg || 'failed'});
        });
      });
  };

  renderComponent = () => {
    return (
      <View style={{flex: 1, backgroundColor: '#160231'}}>
        <NormalHeader
          navigation={this.props.navigation}
          text="Import NFT"
          left={{
            icon: require('../../assets/common/common_back_white.png'),
            onPress: () => {
              Keyboard.dismiss();
              this.props.navigation.goBack();
            },
          }}
        />
        <View style={{flex: 1}}>
          <KeyboardAvoidingView
            behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
            style={{flex: 1}}>
            <ScrollView
              keyboardShouldPersistTaps="handled"
              style={{
                flex: 1,
                paddingLeft: 20,
                paddingRight: 20,
              }}>
              <Text
                style={{
                  marginTop: 20,
                  color: '#C917ED',
                  fontSize: 18,
                  fontWeight: 'bold',
                  marginBottom: 10,
                }}>
                Enter your contract address
              </Text>
              <Text
                style={{color: 'white', fontWeight: 'bold', marginBottom: 20}}>
                Your erc721 or erc1155 nft contract address.
              </Text>
              <LinerBoardTextInput
                placeholder={'contract address'}
                style={{with: '100%', height: 40}}
                onChangeText={(text) => {
                  this.setState({
                    contract: text,
                  });
                }}></LinerBoardTextInput>
              <Text
                style={{
                  marginTop: 20,
                  color: '#C917ED',
                  fontSize: 18,
                  fontWeight: 'bold',
                  marginBottom: 10,
                }}>
                Enter your tokenId
              </Text>
              <Text
                style={{color: 'white', fontWeight: 'bold', marginBottom: 20}}>
                Make sure the corresponding owner is the current wallet address.
              </Text>
              <LinerBoardTextInput
                placeholder={'tokenID'}
                style={{with: '100%', height: 40}}
                onChangeText={(text) => {
                  this.setState({
                    tokenId: text,
                  });
                }}></LinerBoardTextInput>
            </ScrollView>
          </KeyboardAvoidingView>
        </View>
        <LinearButton
          buttonStyle={{
            marginBottom:
              80 + this.props.widgetLayout.show
                ? this.props.widgetLayout.height
                : 0 - 30,
            width: 180,
            alignSelf: 'center',
          }}
          onPress={this.tapImportNft}
          text="Import"></LinearButton>
      </View>
    );
  };
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
  widgetLayout: state.Layout.widgetLayout,
});

const mapDispatchToProps = (dispatch) => ({
  userLogout: (item) => dispatch(userLogout()),
});

export default connect(mapStateToProps, mapDispatchToProps)(ImportNFT);
